// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
// import echarts from 'echarts'
const staticOption = {
  color: ['#fe6e80', '#ffea7f', '#ffdd89', '#a7eb87', '#2bd3bd', '#0099ff', '#7574ee'],
  legend: {
    icon: 'rect',
    data: [],
    itemHeight: 6,
    itemWidth: 20,
    itemGap: 30,
    top: '3%',
    textStyle: {
      color: '#bad3ff',
      fontSize: 16
    }
  },
  dataZoom: [
    {
      type: 'inside',
      startValue: 0,
      endValue: 6,
      minValueSpan: 3,
      maxValueSpan: 8
    }
  ],
  tooltip: {
    trigger: 'item'
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '5%',
    top: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisLabel: {
        fontSize: 16,
        color: '#cccccc',
        interval: 0
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '万次',
      nameTextStyle: {
        color: '#cccccc',
        fontSize: 16,
        padding: [0, 0, 0, -18]
      },
      axisLabel: {
        fontSize: 16,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(5, 56, 143, 0.2)',
          opacity: 0.5,
          width: 2
        }
      }
    },
    {
      type: 'value',
      name: '成功率',
      nameTextStyle: {
        color: '#cccccc',
        fontSize: 16,
        padding: [0, -18, 0, 0]
      },
      min: 95,
      max: 100,
      interval: 1,
      axisLabel: {
        formatter: '{value} %',
        fontSize: 16,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(5, 56, 143, 0.2)',
          opacity: 0.5,
          width: 2
        }
      }
    }
  ],
  series: []
}

const staticOptionMid = {
  color: ['#fe6e80', '#ffa286', '#ffdd89', '#a7eb87', '#2bd3bd', '#0099ff', '#7574ee'],
  legend: {
    data: [],
    itemHeight: 6,
    itemWidth: 20,
    itemGap: 30,
    top: '3%',
    textStyle: {
      color: '#bad3ff',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'item'
  },
  dataZoom: [
    {
      type: 'inside',
      startValue: 0,
      endValue: 6,
      minValueSpan: 3,
      maxValueSpan: 8
    }
  ],
  grid: {
    left: '0%',
    right: '5%',
    bottom: '5%',
    top: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisLabel: {
        fontSize: 14,
        color: '#cccccc',
        margin: 10
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: '#05388f',
          opacity: 0.5,
          width: 2
        }
      }
    }
  ],
  series: []
}

const staticOptionSmall = {
  color: ['#fe6e80', '#ffa286', '#ffdd89', '#a7eb87', '#2bd3bd', '#0099ff', '#7574ee'],
  legend: {
    data: [],
    itemHeight: 6,
    itemWidth: 20,
    itemGap: 30,
    top: '3%',
    textStyle: {
      color: '#bad3ff',
      fontSize: 14
    }
  },
  dataZoom: [
    {
      type: 'inside',
      startValue: 0,
      endValue: 6,
      minValueSpan: 3,
      maxValueSpan: 8
    }
  ],
  tooltip: {
    trigger: 'item'
  },
  grid: {
    left: '0%',
    right: '5%',
    bottom: '5%',
    top: '22%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisLabel: {
        fontSize: 14,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'category',
      data: [],
      axisLabel: {
        fontSize: 14,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: '#05388f',
          opacity: 0.5,
          width: 2
        }
      }
    },
    {
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: '#05388f',
          opacity: 0.5,
          width: 2
        }
      }
    }
  ],
  series: []
}

// 备选颜色，有需求则进行循环
const colors = ['#007bff', '#ffcf6a']

/*
const gradientColors = [
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  // 0% 处的颜色
    offset: 0,
    color: '#007bff'
  }, {
  // 100% 处的颜色
    offset: 1,
    color: '#00afff'
  }
  ], false)), (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#ffcf6a'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#ffe5a1'
  }
  ], false))] */
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 按屏幕宽度设定label宽度
    let labelWidth = 22
    if (screen < 1920 && screen > 1200) {
      labelWidth = 12
    }
    if (screen === 1024) {
      labelWidth = 12
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    this.option.xAxis[0].data = additionalOptions.xAxisData
    colorIndex = 0
    additionalOptions.seriesData.forEach((p1) => {
      this.option.legend.data.push(p1.name)
      if (p1.name === '请求次数') {
        this.option.series.push({
          type: 'bar',
          name: p1.name,
          data: p1.data,
          barMaxWidth: 20,
          barGap: '60%',
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: colors[colorIndex],
              fontSize: labelWidth
            }
          },
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
            barMaxWidth: '20',
            color: '#1890ff' // gradientColors[colorIndex]
          }
        })
      } else {
        this.option.series.push({
          type: 'line',
          yAxisIndex: 1,
          name: p1.name,
          data: p1.data,
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: colors[colorIndex],
              fontSize: labelWidth
            }
          },
          itemStyle: {
            color: '#ffea7f'
          }
        })
      }
      colorIndex += 1
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.xAxis[0].data = []
    this.option.series = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
